<div class="flexFill">
	<mat-toolbar style="display: inline-table; padding: 2px 12px; z-index: 100">

		<div class="spaceBetweenCenter"
			 style="height: 52px">
			<h2 style="font-size: 18px;" *ngIf="showSettings">Settings</h2>

			<mat-form-field *ngIf="!showSettings" appearance="legacy" class="searchField" style="margin-bottom: -1.25em">
				<input
					#filter
					(keyup)="filterChanged(filter.value)"
					autocomplete="off"
					matInput
					placeholder="Filter chat">
				<button
					(click)="filter.value=''; filterChanged(filter.value)"
					*ngIf="filter.value"
					aria-label="Clear"
					mat-icon-button
					matSuffix>
					<span class="material-symbols-outlined notranslate">close</span>
				</button>
			</mat-form-field>

			<div>
				<button
					(click)="chat = []; saveChat()"
					*ngIf="chat.length >= 1"
					mat-button>
					<span class="material-symbols-outlined notranslate">
						clear_all
					</span>
				</button>
				<button
					(click)="showSettings = !showSettings;"
					[class.mat-flat-button]="showSettings"
					mat-stroked-button>
					<span class="material-symbols-outlined notranslate">
						page_info
					</span>
				</button>
			</div>
		</div>
	</mat-toolbar>

	<mat-progress-bar
		*ngIf="loadingCount > 0"
		mode="indeterminate"
		color="accent">
	</mat-progress-bar>

	<div [hidden]="!showSettings" class="container">

		<mat-card style="display: flex; flex-direction: column; padding: 0px">
			<div style="display: flex;">
				<mat-selection-list
					(selectionChange)="preSentChange()"
					[(ngModel)]="preSent.tables"
					dense
					multiple
					style="height: 250px; width: 45%; overflow: auto;">
					<mat-list-option
						*ngFor="let table of selectedDatabase?.tables"
						[value]="table.name">
						{{ table.name }}
					</mat-list-option>
				</mat-selection-list>

				<div
					style="height: 250px; display: flex; flex-direction: column; justify-content: space-around; margin: 0px auto;">
					<div>
						<mat-form-field appearance="outline" color="accent" style="margin-bottom: -1.25em">
							<mat-label>Anonymize</mat-label>
							<mat-select
								(selectionChange)="preSentChange()"
								[(ngModel)]="preSent.anonymize">
								<mat-option [value]="0">
									Raw
								</mat-option>
								<mat-option [value]="1">
									Swapped data
								</mat-option>
								<mat-option [value]="2">
									Type instead of data
								</mat-option>
							</mat-select>
						</mat-form-field>
					</div>

					<div class="slider">
						<div>
							<span>Rows count</span>
							<span>{{ preSent.count }}</span>
						</div>
						<mat-slider
							(change)="preSentChange()"
							(input)="preSent.count = $event.value!.valueOf()"
							[value]="preSent.count"
							color="accent"
							max="200"
							min="5"
							step="1">
						</mat-slider>
					</div>

					<div class="slider">
						<div>
							<span>Deep level</span>
							<span>{{ preSent.deep }}</span>
						</div>
						<mat-slider
							(change)="preSentChange()"
							(input)="preSent.deep = $event.value!.valueOf()"
							[value]="preSent.deep"
							color="accent"
							max="15"
							min="0"
							step="1">
						</mat-slider>
					</div>

					<div>
						Context prompt ≈ {{ Math.floor(sample.split('').length / 3.4) }} tokens
					</div>
				</div>
			</div>

			<button
				(click)="showPrompt = true"
				*ngIf="showPrompt === false"
				color="accent"
				mat-button>
				Show Prompt
			</button>

			<div style="position: relative; padding: 0px;">
				<ngx-monaco-editor
					[(ngModel)]="sample"
					[hidden]="!showPrompt"
					[options]="editorOptions"
					style="min-width: inherit; flex: 1; min-height: 300px"
				></ngx-monaco-editor>
			</div>
		</mat-card>

		<mat-card style="padding: 10px 0px; display: flex; flex-direction: column;">
			<h3 *ngIf="Object.keys(models).length < 1"
				style="margin-bottom: 8px; text-align: center; color: #ff9800">
				Please fill a provider key before selecting a model
			</h3>

			<mat-form-field
				class="searchField"
				*ngIf="Object.keys(models).length"
				appearance="fill"
				color="accent"
				style="padding: 10px 14px 0px; flex: 1;">
				<mat-label>Model</mat-label>
				<input
					#filter
					[(ngModel)]="config.model"
					[matAutocomplete]="auto"
					matInput>
				<button
					(click)="config.model = '';"
					*ngIf="config.model"
					aria-label="Clear"
					mat-icon-button
					matSuffix>
					<span class="material-symbols-outlined notranslate">close</span>
				</button>
				<mat-autocomplete
					(optionSelected)="configChange()"
					#auto="matAutocomplete">
					<mat-optgroup
						*ngFor="let pEnum of Object.keys(models)"
						[label]="ProvidersDetail[pEnum].name"
						class="hasBold">
						<ng-container *ngFor="let model of models[pEnum]">
							<mat-option
								*ngIf="JSON.stringify(model.fullName.toLowerCase()).indexOf(filter.value.toLowerCase()) >= 0"
								[class.bold]="true"
								[value]="model.fullName">
								{{ model.shortName }}
							</mat-option>
						</ng-container>
					</mat-optgroup>
				</mat-autocomplete>
			</mat-form-field>

			<mat-divider style="position: relative;"></mat-divider>

			<div style="display: flex;">
				<div id="tokens">
					<div *ngFor="let provider of ProvidersDetail | keyvalue">
						<a [href]="provider.value.url"
						   mat-button
						   target="_blank">
							<mat-icon style="width: 70px" [svgIcon]="provider.key"></mat-icon>
						</a>

						<mat-form-field appearance="standard">
							<mat-label>Key</mat-label>
							<input
								(change)="goodKey(provider.key) ? configChange() : undefined"
								[(ngModel)]="config[provider.key]"
								matInput>
						</mat-form-field>
						<mat-error *ngIf="!goodKey(provider.key)">
							Key doesn't work
						</mat-error>
						<mat-error *ngIf="config[provider.key] && models[provider.key] && models[provider.key].length < 1">
							Models cannot be retrieved
						</mat-error>
					</div>
				</div>

				<div class="centered" style="min-width: 150px;">
					<div class="slider">
						<div>
							<span matTooltip="Higher values will make the output more random
						Lower values will make it more focused and deterministic"
								  matTooltipPosition="left">Temperature</span>
							<span>{{ config.temperature }}</span>
						</div>
						<mat-slider
							(change)="configChange()"
							(input)="config.temperature = $event.value!.valueOf()"
							[value]="config.temperature"
							color="accent"
							max="2"
							min="0"
							step="0.1">
						</mat-slider>
					</div>

					<div class="slider">
						<div>
							<span
								matTooltip="If you set Top-p to 0.9, the LLM will only generate words that have a probability of at least 0.9"
								matTooltipPosition="left">Top P
							</span>
							<span>{{ config.top_p }}</span>
						</div>
						<mat-slider
							(change)="configChange()"
							(input)="config.top_p = $event.value!.valueOf()"
							[value]="config.top_p"
							color="accent"
							max="2"
							min="0"
							step="0.1">
						</mat-slider>
					</div>
				</div>
			</div>
		</mat-card>
	</div>

	<div></div>

	<div #scrollContainer [hidden]="showSettings" (scroll)="onScroll($event)" class="container">

		<div *ngIf="!chat.length && config.model">
			<br><br>
			<h3 style="text-align: center; border-bottom: 1px dashed grey">Some examples</h3>
			<div id="examples">
				<button
					(click)="sendMessage(example);"
					*ngFor="let example of examples"
					mat-stroked-button>
					{{ example }}
				</button>
			</div>
		</div>

		<ng-container *ngIf="chat.length">
			<mat-card
				*ngFor="let ch of chat"
				[hidden]="ch.hide"
				[style.background-color]="ch.error ? '#f44336' : ch.user === Role.Assistant ? undefined : 'transparent'"
				[style.margin-bottom]="ch.user === Role.User ? '-18px' : undefined"
				style="box-shadow: none">
				<mat-card-content>

					<button
						(click)="message.value = ch.txt"
						*ngIf="ch.user === Role.User"
						color="accent"
						mat-flat-button
						mat-icon-button
						style="float: left; top: -8px; width: 34px; height: 34px; line-height: 34px; margin-right: 10px;">
						<span class="material-symbols-outlined notranslate" style="font-size: 18px">
							edit
						</span>
					</button>

					<div *ngIf="!ch.error && ch.user === Role.Assistant" class="actions"
						 style="bottom: 0px; border-bottom: 0px; border-top: 1px solid #1de9b6; border-radius: 0px; border-top-left-radius: 4px; top: inherit;">
						<button
							[matTooltip]="JSON.stringify(ch.config)"
							color="accent"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								info
							</span>
						</button>
						<button
							(click)="sendMessage('The response ```' + ch.txt + '``` was wrong. Please retry');"
							color="accent"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								replay
							</span>
						</button>
						<button
							(click)="sendMessage('Please summarize the response ```' + ch.txt + '```');"
							color="accent"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								short_text
							</span>
						</button>
						<button
							(click)="sendMessage('Can you please give me more details about the response: ```' + ch.txt + '```');"
							color="accent"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								subject
							</span>
						</button>
					</div>

					<div *ngFor="let mrk of ch.marked" class="marked">
						<div *ngIf="mrk.code && !ch.error" class="responseCode">
							<div class="sub-actions">
								<button
									(click)="runQuery(mrk.code);"
									color="accent"
									mat-icon-button
									matTooltip="Run and send result to IA"
									matTooltipPosition="left">
									<span class="material-symbols-outlined notranslate">
										fast_forward
									</span>
								</button>
								<button
									(click)="goToQuery(mrk.code);"
									color="accent"
									mat-icon-button>
									<span class="material-symbols-outlined notranslate">
										send
									</span>
								</button>
								<button
									(click)="snackBar.open('Code copied', '⨉', {duration: 3000})"
									[cdkCopyToClipboard]="mrk.code"
									color="accent"
									mat-icon-button>
									<span class="material-symbols-outlined notranslate">
										content_paste
									</span>
								</button>
							</div>
							<pre><code [highlight]="mrk.code" [lineNumbers]="true"></code></pre>
						</div>

						<div [innerHTML]="mrk.html"></div>
					</div>

				</mat-card-content>
			</mat-card>
			<mat-card *ngIf="stream !== undefined">

				<ng-container *ngIf="!stream">
					<mat-progress-bar
						mode="indeterminate"
						color="accent"
					></mat-progress-bar>
				</ng-container>

				<ng-container *ngIf="stream">
					<mat-card-content>
						<div [innerHTML]="stream"></div>
					</mat-card-content>
					<mat-card-actions style="display: flex; justify-content: space-evenly;">
						<button
							(click)="abort = true; alternative()"
							color="accent"
							mat-stroked-button>
							<span class="material-symbols-outlined notranslate">
								change_circle
							</span>
							Alternative
						</button>
						<button
							(click)="abort = true"
							color="warn"
							mat-button>
							<span class="material-symbols-outlined notranslate">
								stop_circle
							</span>
							Abort
						</button>
					</mat-card-actions>
				</ng-container>
			</mat-card>
		</ng-container>
	</div>

	<div [hidden]="showSettings" id="sendInput">
		<mat-form-field
			appearance="fill"
			color="accent">
			<mat-label>Ask anything about <i>{{ selectedDatabase?.name }}</i></mat-label>
			<textarea
				#message
				(keydown.enter)="sendMessage(message.value); resetInput(message)"
				cdkFocusInitial
				cdkTextareaAutosize
				matInput
				style="max-height: 60vh;"></textarea>
			<button
				(click)="sendMessage(message.value); resetInput(message)"
				[disabled]="!message.value"
				mat-icon-button
				matSuffix>
				<span class="material-symbols-outlined notranslate">
					send
				</span>
			</button>
		</mat-form-field>
	</div>
</div>
